<template>
  <div class="transfer-div">
    <div v-if="tagsTypeList.length" class="searchType">
      <span>标签类型：</span>
      <el-radio-group v-model="radio1" @change="changeTagsType" size="small">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button
          v-for="item in tagsTypeList"
          :key="item.type"
          :class="item.selectedLength > 0 ? 'font-color':''"
          :label="item.type">{{item.name}} ({{item.selectedLength}}/{{item.maxLength}})</el-radio-button>
      </el-radio-group>
    </div>


    <el-transfer
      style="text-align: left; display: inline-block;"
      v-model="valueArr"
      filterable
      :titles="['未选标签列表', '已选中标签列表']"
      :button-texts="['删除', '添加']"
      :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
      @change="transferChange"
      :data.sync="Options">
      <span slot-scope="{ option }">
        <span v-if="option.typeName">{{option.typeName}}-</span>
        {{ option.label}}
        <span v-if="isRoot && option.company_name">-({{option.company_name}})</span>
      </span>
    </el-transfer>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        Options:[],
        valueArr:this.value,
        isRoot:false,
        radio1:'all',
      }
    },
    props:{
      value:{
        default:function () {
          return []
        }
      },
      options:{
        default:function () {
          return []
        }
      },
      event:{
        default:function () {
          return ''
        }
      },
      tagsTypeList:{
        default:function () {
          return []
        }
      }
    },
    created(){
      console.log('created');
      this.Options = this.options
      this.isRoot = localStorage.isRoot == 1 ? true :false
      this.syncTagsTypeList()
    },
    mounted(){
      // console.log(this.options, 'options');

    },
    watch:{
      options(val){
        console.log(val);
        this.Options = val
      },
      value(val){
        // console.log(val,'watch-val');
        this.valueArr = val
      },
      syncTagsTypeList:{
        handler(val){
          console.log(val,'syncTagsTypeList');
        },
        deep:true
      },
    },
    methods:{
      //穿梭框change事件
      transferChange(value, direction, movedKeys) {
        // console.log(value, direction, movedKeys);
        this.syncTagsTypeList()
        this.$emit(this.event,value)
      },
      changeTagsType(type){
        if(type == 'all'){
          this.Options = this.options
        }else{
          this.Options = this.options.filter(x=>{
            return x.type == type
          })
        }
        this.$nextTick(()=>{
          this.syncTagsTypeList()
        })
      },
      syncTagsTypeList(){
        if(this.tagsTypeList.length){
          //添加最大标签数和已选中标签数
          for(let i in this.tagsTypeList){
            let type = this.tagsTypeList[i].type
            let maxLength = 0;
            let selectedLength = 0;
            for(let j in this.options){
              if(this.options[j].type == type){
                for(let k in this.valueArr){
                  if(this.valueArr[k] == this.options[j].id){
                    selectedLength++
                  }
                }
                maxLength++;
              }

            }
            this.tagsTypeList[i].maxLength = maxLength
            this.tagsTypeList[i].selectedLength = selectedLength
          }
        }
      }
    },
  }
</script>

<style lang="scss">
  .transfer-div .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .transfer-div .el-transfer-panel{
    width: 300px;
  }
  .searchType{
    margin: 0px 25px 20px;
    text-align: left;
    .font-color{
      .el-radio-button__inner{
        color:#545ceb
      }
    }
    .font-color.is-active{
      .el-radio-button__inner{
        color:#fff
      }
    }
  }
</style>